<template>
  <div class="app-container" style="background: #FFFFFF;">
    <!-- Info Banners -->
    <div v-if="showInfoBanner" class="info-banner">
      <i class="el-icon-info" style="color: #0d73fc; font-size: 16px"></i>
      <span style="font-size: 14px">试验您参加消息&消息使用社会调研，您宝贵的意见和建议是我们持续提升产品体验的源动力，感谢您的参与！</span>
      <i class="el-icon-close close-icon" style="color: #0d73fc; font-size: 16px" @click="closeInfoBanner"></i>
    </div>

    <div v-if="showWarningBanner" class="warning-banner">
      <i class="el-icon-warning" style="color: #0d73fc; font-size: 16px"></i>
      <div class="warning-content" style="font-size: 14px">
        <p>
          1.【重要通知】关于若干次通信消息&消息服务便宜的通知，营运时段方云来等大幅，消息服务将完成暂停。
          <a href="#" class="link">点击查看</a>
        </p>
        <p>
          2.业务云消息息&消息服务的国际/港澳台消息有在部分国家（部地区）的消息进行价格调整，新价格于2024/11/01 00:00（北京时间）正式生效，生效后按照新价格收取费用。
          <a href="#" class="link">点击查看</a>
        </p>
        <p>
          3.为降低因客户自身业务被恶意消息导致的损失,平台对消息发送量进行值管理,请前往云息通信管理平台的编值监控满足当前业务需求。
        </p>
      </div>
    </div>

    <div class="dashboard-content">
      <el-card class="main-content">
        <!-- Basic Data Section -->
        <div class="basic-data">
          <div class="data-header" style="font-size: 14px">
            <h2 style="font-weight: bold">基本数据</h2>
            <div class="refresh-section">
              <span class="timestamp">数据获取时间: {{ currentTime }}</span>
              <button class="refresh-button" @click="refreshData">
                <i class="el-icon-refresh"></i>
              </button>
            </div>
          </div>


          <div class="stats-cards">
            <!-- Today's Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">今日发送成功量</div>
                <div class="stats-number">{{ todayStats.count }} <span>条</span></div>
                <div class="stats-detail">今日发送总量: {{ todayStats.total }} 条</div>
              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>

            <!-- Monthly Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">本月发送成功量</div>
                <div class="stats-number">{{ monthStats.count }} <span>条</span></div>
                <div class="stats-detail">本月发送总量: {{ monthStats.total }} 条</div>
              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>
            <!-- Year Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">本年发送成功量</div>
                <div class="stats-number">{{ yearStats.count }} <span>条</span></div>
                <div class="stats-detail">本年发送总量: {{ yearStats.total }} 条</div>
              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>
          </div>



          <div class="stats-cards" style="margin-top: 30px;">
            <!-- Today's Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">客户数量</div>
                <div class="stats-number"  style="color: green;">{{  countval.khcount }} <span>个</span></div>

              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>

            <!-- Monthly Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">通道数量</div>
                <div class="stats-number" style="color: green;">{{ countval.tdcount }} <span>个</span></div>

              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>
            <!-- Year Stats -->
            <div class="stats-card">
              <div class="stats-content">
                <div class="stats-header">签名数量</div>
                <div class="stats-number" style="color: green;">{{ countval.qmcount }} <span>个</span></div>

              </div>
              <div class="stats-icon">
                <img src="@/assets/images/message-bg.png" alt="Paper airplane icon" class="airplane-icon">
              </div>
            </div>
          </div>
        </div>


      </el-card>

      <!-- Help Section (Now integrated into the main page) -->
      <el-card class="help-section" style="font-size: 14px">
        <h3 style="font-size: 16px ; font-weight: bold">帮助</h3>
        <ul class="help-links">
          <li><a href="#" class="help-link">新手必读</a></li>
          <li><a href="#" class="help-link">消息业务规则</a></li>
          <li><a href="#" class="help-link">消息价格详情</a></li>
          <li>
            <a href="#" class="help-link">API应用</a>
            <span class="help-description">具有开发能力的客户产品过程中调用API发送消息</span>
          </li>
          <li>
            <a href="#" class="help-link">群发助手</a>
            <span class="help-description">无需开发，直接发送消息</span>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listSmsRecord, getSmsRecord, delSmsRecord, addSmsRecord, updateSmsRecord, listSmsCount,Listcountval } from "@/api/Sms/SmsRecord";
export default {
  name: 'SmsDashboard',
  data() {
    return {
      showInfoBanner: true,
      showWarningBanner: false,
      activeTab: 'domestic',
      currentTime: '2024/11/28 09:32:48 GMT+08:00',
      tabs: [
        { id: 'domestic', name: '国内消息' },
        { id: 'international', name: '国际/港澳台消息' }
      ],
      todayStats: {
        count: 0,
        total: 0
      },
      monthStats: {
        count: 28,
        total: 32
      },
      yearStats: {
        count: 28,
        total: 32
      },
      countval: {
        khcount: 0,
        tdcount: 0,
        qmcount:0
      }
    }
  },
  created() {
    this.getListcount();
  },
  methods: {
    getListcount() {
      this.loading = true;
      this.queryParams.userId=this.$store.state.user.userId;
      listSmsCount(this.queryParams).then(response => {
        console.log(response.rows);
        response.rows.forEach(el1 => {
          if (el1.other2 == 'st') {
            this.todayStats.count = el1.other1;
          }
          if (el1.other2 == 't') {
            this.todayStats.total = el1.other1;
          }
          if (el1.other2 == 'y') {
            this.monthStats.total = el1.other1;
          }
          if (el1.other2 == 'sy') {
            this.monthStats.count = el1.other1;
          }
          if (el1.other2 == 'n') {
            this.yearStats.total = el1.other1;
          }
          if (el1.other2 == 'sn') {
            this.yearStats.count = el1.other1;
          }
        });
      });
      Listcountval(this.queryParams).then(response => {
        console.log(response.rows);
        response.rows.forEach(el1 => {
          if (el1.other2 == 'kh') {
            this.countval.khcount = el1.other1;
          }
          if (el1.other2== 'td') {
            this.countval.tdcount = el1.other1;
          }
          if (el1.other2 == 'qm') {
            this.countval.qmcount = el1.other1;
          }

        });
      });
    },
    closeInfoBanner() {
      this.showInfoBanner = false
    },
    refreshData() {
      this.currentTime = new Date().toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai',
        hour12: false
      })
    }
  }
}
</script>

<style scoped>
.sms-dashboard {
  padding: 20px;
  background: #f5f7fa;
}

.info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  margin-bottom: 16px;
}

.warning-banner {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 4px;
  margin-bottom: 12px;
}

.warning-content {
  flex: 1;
}

.warning-content p {
  margin: 8px 0;
  line-height: 1.5;
}

.close-icon {
  cursor: pointer;
  color: #8c8c8c;
}

.dashboard-content {
  display: flex;
  gap: 24px;
}

.main-content {
  flex: 1;
}

.nav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: none;
  cursor: pointer;
  color: #595959;
  position: relative;
}

.tab-button.active {
  color: #1890ff;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
}

.basic-data {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.refresh-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timestamp {
  color: #8c8c8c;
  font-size: 14px;
}

.refresh-button {
  padding: 6px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}


.stats-card {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.stats-number {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
  margin: 12px 0;
}

.stats-number span {
  font-size: 14px;
  margin-left: 4px;
}

.stats-detail {
  color: #8c8c8c;
  font-size: 14px;
}

.airplane-icon {
  width: 80px;
  height: 80px;
  opacity: 0.6;
}

.package-section {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 24px;
}

.package-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
}

.package-content {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}

.gift-icon {
  width: 64px;
  height: 64px;
}

.package-info {
  flex: 1;
}

.price {
  color: #ff4d4f;
  margin: 8px 0;
}

.buy-button {
  padding: 8px 24px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.package-notes {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
}

.help-section {
  width: 250px;
  background: white;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.help-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-link {
  color: #1890ff;
  text-decoration: none;
  display: block;
  padding: 6px 0;
}

.help-description {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-top: 4px;
}

.link {
  color: #1890ff;
  text-decoration: none;
}

.link:hover {
  color: #40a9ff;
}

@media (max-width: 768px) {
  .dashboard-content {
    flex-direction: column;
  }

  .help-section {
    width: 100%;
  }
}
</style>
